<template>
  <view class="pay_body">
    <view class="pay_header">
      <view class="icon">￥</view>
      <view class="money">{{ order.payList[0].actualTotalCost }}</view>
    </view>
    <view class="pay_contont">
      <view class="text">费用明细</view>
      <view class="pay_box">
        <view
          class="row"
          v-for="(item, index) in order.payList.costList"
          :key="index"
        >
          <view class="left">{{ item.ssopRemark }}</view>
          <view class="left">￥{{ item.actualMoney }}</view>
        </view>
      </view>
    </view>
    <view class="pay_foot">
      <view class="left" :class="{ active: payType == 1 }" @click="payType = 1">
        <view class="one">
          <view class="t">聚合支付</view>
          <view class="b">使用聚合支付</view>
        </view>
        <view class="tow">
          <view class="icon" v-if="payType == 1">已选</view>
          <image src="@/assets/images/index/icon_jvhe.png"></image>
        </view>
      </view>
      <view
        class="right"
        :class="{ active: payType == 2 }"
        @click="payType = 2"
      >
        <view class="one">
          <view class="t">好友代付</view>
          <view class="b">邀请好友代付</view>
        </view>
        <view class="tow">
          <view class="icon" v-if="payType == 2">已选</view>
          <image src="@/assets/images/index/icon_daifu.png"></image>
        </view>
      </view>
    </view>
    <view class="pay_btn" @click="success">确认支付</view>
    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showBasic">
      <!-- <vue-qr :text="codeUrl" :size="500" :logoScale="0.2"> </vue-qr> -->
    </nut-popup>
  </view>
</template>
<script lang="ts" setup>
import useMyOrderStore from "@/store/myOrder";
import Taro from "@tarojs/taro";
import { useDidShow } from "@tarojs/taro";
import { ref } from "vue";
import { $post } from "../../@api/index";
import VueQr from "vue-qr";

const order = useMyOrderStore();
const payType = ref<number>(1);
const showBasic = ref<boolean>(false);
const codeUrl = ref();

useDidShow(() => {
  console.log(order.payList, "hahahh");
});
function success() {
  if (order.payList[0].costList.length) {
    let allmoney: any = 0;
    let payList = order.payList[0];
    //承运单号处理
    let billNoList: any = [];
    billNoList.push(payList.billNo);
    //总价格处理与费用明细处理
    payList.costList.forEach((aa) => {
      if (aa.paid == "0") {
        allmoney += aa.actualMoney * 1 - aa.paidMoney * 1;
      }
    });
    let pram = {
      bill: {
        billNos: billNoList,
        // billNos: [284493952],
        // customerId: JSON.parse(sessionStorage.getItem("userMessage"))
        //   .contractedNo,
        money: allmoney,
        actualMoney: allmoney,
        serviceCharge: 0,
        btssId: 1, //!!!!!!
        // btssType: "3",
        // details: details,
      },

      device_info: "pp01",
      body: "支付运单3",
      attach: "000003069",
      total_fee: Math.ceil(allmoney * 100),
      // branchno: JSON.parse(sessionStorage.getItem("userMessage")).contractedNo
      //   ? JSON.parse(sessionStorage.getItem("userMessage")).contractedNo
      //   : "00002",
      branchno: "00002",
      paytype: "04",
      eop: "SYSADMIN",
      type: "01",
      // v2: JSON.parse(sessionStorage.getItem("userMessage")).openid,
      v3: "",
      isdebug: "True",
      debug: true,
    };
    $post<any>("/selfmachine-system/fee/newPay", pram).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        codeUrl.value = JSON.parse(res.data.data).QRCODESTRING;
        if (payType.value == 1) {
          window.location.replace(codeUrl.value);
        } else if (payType.value == 2) {
          showBasic.value = true;
        }
      } else {
      }
    });
  }

  Taro.navigateTo({
    url: "/pages/pay/paySuccess",
  });
}
</script>

<style lang="scss">
.active {
  border: 1rpx solid #0966ff;
}
.pay_btn {
  width: 702rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0966ff;
  font-size: 32rpx;
  margin-left: 24rpx;
  border-radius: 200rpx;
  /* 文字色/白 */
  color: #ffffff;
  position: fixed;
  bottom: 10rpx;
}
.pay_body {
  width: 100vw;
  height: 100vh;
  .pay_header {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      font-family: PingFang SC;
      font-size: 44rpx;
      font-weight: normal;
      color: #252525;
    }
    .money {
      font-family: PingFang SC;
      font-size: 76rpx;
      color: #252525;
    }
  }
  .pay_contont {
    width: 100%;
    height: 50%;
    padding: 0 24rpx;
    box-sizing: border-box;
    background: #f5f5f5;
    font-family: PingFang SC;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 24rpx;
    box-sizing: border-box;
    .text {
      font-size: 24px;

      /* 文字1 */
      color: #252525;
    }
    .pay_box {
      width: 650rpx;
      height: 600rpx;
      margin-top: 20rpx;
      overflow: auto;
      .row {
        width: 100%;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          font-size: 28rpx;
        }
      }
    }
  }
  .pay_foot {
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    .left {
      width: 344rpx;
      height: 180rpx;
      background: linear-gradient(242deg, #e5efff 0%, #f2f7ff 99%);
      border-radius: 16rpx;
      margin-right: 24rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .one {
        margin-left: 24rpx;
        margin-top: 24rpx;
        .t {
          font-size: 28rpx;
          font-weight: 700;
        }
        .b {
          color: #666666;
          font-size: 24rpx;
        }
      }
      .tow {
        height: 100%;
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        image {
          width: 104rpx;
          height: 104rpx;
          margin-top: 25rpx;
          margin-right: 10rpx;
        }
        .icon {
          width: 60rpx;
          height: 32rpx;
          border-radius: 0px 4rpx 0px 16rpx;
          font-size: 18rpx;
          background: #0966ff;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .right {
      width: 344rpx;
      height: 180rpx;
      box-sizing: border-box;
      background: linear-gradient(
        62deg,
        #f3f2ff 1%,
        #e8e5ff 100%,
        #e1deff 100%
      );
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      .one {
        margin-left: 24rpx;
        margin-top: 24rpx;
        .t {
          font-size: 28rpx;
          font-weight: 700;
        }
        .b {
          color: #666666;
          font-size: 24rpx;
        }
      }
      .tow {
        height: 100%;
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        image {
          width: 104rpx;
          height: 104rpx;
          margin-top: 25rpx;
          margin-right: 10rpx;
        }
        .icon {
          width: 60rpx;
          height: 32rpx;
          border-radius: 0px 4rpx 0px 16rpx;
          font-size: 18rpx;
          background: #0966ff;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
